<template>
	<div class="app-container">

		<el-select v-model="initsort" placeholder="请选择">
			<el-option label="全部" value=""></el-option>
    <el-option label="A" value="A"> </el-option>
     <el-option label="B" value="B"> </el-option>
      <el-option label="C" value="C"> </el-option>
  </el-select>

		<el-table :data="tableData" style="width: 100%">

			<el-table-column label="序号" width="150" align="center">
				<template slot-scope="scope">
					{{scope.row.number}}
				</template>
			</el-table-column>

			<el-table-column label="姓名" align="center">
				<template slot-scope="scope">
					{{scope.row.name}}
				</template>
			</el-table-column>

			<el-table-column label="现场操作1 常见浮游植物的识别 （40分）">

				<el-table-column label="裁判1" align="center">
					<template slot-scope="scope">
						<el-input v-model="scope.row.operation1Referee1" placeholder="请输入成绩"></el-input>
					</template>
				</el-table-column>

				<el-table-column label="裁判2" align="center">
					<template slot-scope="scope">

						<el-input v-model="scope.row.operation1Referee2" placeholder="请输入成绩"></el-input>
					</template>
				</el-table-column>

				<el-table-column label="裁判3" align="center">
					<template slot-scope="scope">

						<el-input v-model="scope.row.operation1Referee3" placeholder="请输入成绩"></el-input>
					</template>
				</el-table-column>

				<el-table-column label="裁判4" align="center">
					<template slot-scope="scope">
						<el-input v-model="scope.row.operation1Referee4" placeholder="请输入成绩"></el-input>
					</template>
				</el-table-column>

				<el-table-column label="裁判5" align="center">
					<template slot-scope="scope">
						<el-input v-model="scope.row.operation1Referee5" placeholder="请输入成绩"></el-input>
					</template>
				</el-table-column>

			</el-table-column label>
			<el-table-column label="小计" align="center">
				<template slot-scope="scope">
					<!--{{parseInt(scope.row.operationR1)+parseInt(scope.row.operationR2)+parseInt(scope.row.operationR3)+parseInt(scope.row.operationR4)+parseInt(scope.row.operationR5)}}-->
					{{xjtotal(scope.row)}}
				</template>
			</el-table-column>

		</el-table>
		<el-row style="text-align: right;margin-top:10px">
			<el-button type="primary" @click="save">保存</el-button>
		</el-row>

		<el-row style="text-align: right; margin-right: 10px;">
			<div class="grid-content bg-purple-light">
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currenPage" :page-size="pageSize" layout="total, prev, pager, next" :total="total">
				</el-pagination>

			</div>
		</el-row>

	</div>

</template>
<script>
	import { getOperation1, saveOperation } from '@/api/table'
	export default {
		name: 'Procticeinput',
		data() {
			return {
				//	page:1,//当前页
				pageSize: 15, //每页的条数
				total: 0, //中条数
				pages: 0, //总页数
				currenPage: 1, //当前页
				tableData: [],
				text:'全部数据',
				initsort:null
			}
		},
		 watch: {
      initsort(val) {
      this.fetchData()
      }
    },
		methods: {
			fetchData() {
				this.listLoading = true
				getOperation1(this.currenPage, this.pageSize,this.initsort).then(response => {
					if(response.code == 200) {
						this.listLoading = false
						this.tableData = response.data.list

						this.total = response.data.total
						this.currenPage = response.data.pageNum

					} else {
						this.listLoading = false
						this.$message.error('请求数据失败');
						return
					}

				})
			},

			handleSizeChange() {

			},

			handleCurrentChange(e) {
				//当前页的改变
				this.currenPage = e
				this.fetchData()
			},

			changeFunction(e) {
				console.log(e)
			},

			/*点击下拉框*/
			handleDropdown(command){
				this.text=command
				//拼接模糊查询
				console.log(command)
				this.initsort=command
				this.fetchData()


			},

			save() {

				for(var i = 0; i < this.tableData.length; i++) {
					if(
						this.tableData[i].operation1Referee1 === "" ||
						this.tableData[i].operation1Referee2 === "" ||
						this.tableData[i].operation1Referee3 === "" ||
						this.tableData[i].operation1Referee4 === "" ||
						this.tableData[i].operation1Referee5 === "") {
						//给出提示
						this.$message.error('请填写完整信息');
						return
					}
				}

				saveOperation(this.tableData).then(response => {
					if(response.data) {
						this.$message({
							message: response.msg,
							type: 'success'
						});
					} else {
						this.$message({
							message: '提交失败',
							type: 'error'
						});
					}
				})
			},
			xjtotal(row) {
				/*判斷循环出最高分和最低分*/
				if(row.operation1Referee1 != null && row.operation1Referee1 !== '' && row.operation1Referee2 != null && row.operation1Referee2 !== '' && row.operation1Referee3 != null && row.operation1Referee3 !== '' && row.operation1Referee4 != null && row.operation1Referee4 !== '' && row.operation1Referee5 != null && row.operation1Referee5 !== '') {
					var a = [parseFloat(row.operation1Referee1), parseFloat(row.operation1Referee2), parseFloat(row.operation1Referee3), parseFloat(row.operation1Referee4), parseFloat(row.operation1Referee5)];
					a.sort()
					return row.subtotal1 = ((a[1] + a[2] + a[3]) / 3).toFixed(2)
				} else {
					return 0
				}
			}
		},
		computed: {

		},
		created() {
			this.fetchData()
		}
	}
</script>

<style>
	.el-dropdown-link {
		cursor: pointer;
		color: #409EFF;
	}

	.el-icon-arrow-down {
		font-size: 12px;
	}

	.el-table {}

	.el-table td,
	.el-table th {
		text-align: center;
	}
</style>
